<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>绑定手机</title>
	<link rel="stylesheet" type="text/css" href="__CSS__api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
	<style>
		.aui-bar-nav .aui-iconfont {
			position: relative;
			font-family: "aui_iconfont" !important;
			font-size: 0.75rem;
			color: #E73C5C;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			height: 2.4rem;
		}

		.aui-bar-nav {
			background-color: #fff;
		}

		.aui-icon-tu {
			height: 2.4rem;
			width: 45px;
			background: url('__IMG__guanbi.png') no-repeat 0.5rem center;
			background-size: 20px 20px;
		}

		.aui-bar-nav .aui-pull-right {
			padding-right: 0.75rem;
		}

		.aui-bar-nav .aui-title {
			font-size: 0.9rem;
			color: #333333;
			font-weight: 500;
		}
		body{
			background-color: #FFFFFF;
		}
	 .warrp{
		 width: 100%;
		 height: 100%;
		 padding: 1.4rem 1.5rem 0 1.5rem;
	 }
	 .title{
		 width: 100%;
		 height: 3.5rem;
		 font-size:1.15rem;
		 color: #333333;
		 line-height:1.15rem;
		 padding-bottom:2.4rem;
		 font-weight: bold;
	 }
	 .phone{
			margin-top: 0.8rem;
			font-size:0.7rem;
			color:#333333;
			line-height:0.6rem;
			font-weight: bold;
	 }
	 .shuru{
		 width: 100%;
		 height: 2.35rem;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
	 }
	 .code{
		 width: auto;
		 height: 2.25rem;
		 font-size:0.65rem;
		 color:#B3B3B3;
		 line-height:2.35rem;
	 }
	 input[type="text"], input[type="password"], input[type="tel"] {
		 width: 9rem;
		 height: 2.25rem;
		 color: #010101;
		 background: none;
		 outline: none;
		 font-size: 0.8rem;
		 font-weight: 600;
		 line-height:2.25rem;
		 padding: 0 0 0 0;
		 margin: 0 0 0 0;
	 }

	 input::-webkit-input-placeholder {
		 color: #B3B3B3;
		 font-size: 0.75rem;
		 font-weight: normal;
		 line-height:2.25rem;
	 }
	 .login-btn{
		 margin-top: 2.25rem;
		 width:100%;
		 height:2.5rem;
		 background:#E73C5C;
		 border-radius:5px;
		 font-size:0.8rem;
		 color:#FFFFFF;
		 line-height:2.5rem;
		 text-align: center;
		 font-weight: bold;
	 }
	 .zhuce{
		 height: 0.65rem;
		 font-size:0.7rem;
		 color: #E73C5C;
		 line-height:0.65rem;
		 margin-top: 0.9rem;
		 float: right;
	 }
	 .sanfang{
		 width: 100%;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 margin-top: 3.55rem;
	 }
	 .tu img{
		 width: 2.25rem;
		 height: 2.25rem;
	 }
	 .xieyi{
		 width: 100%;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 margin-top: 9.3rem;
	 }
	 .xiaobiao{
		 width: 0.75rem;
		 height: 0.75rem;
	 }
	 .tongyi{
		 font-size: 0.65rem;
		 color: #999999;
		 font-size: 0.6rem;
	 }
	 .tongyi span{
		 color: #E73C5C;
	 }

        input[type="checkbox"] {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            vertical-align: middle;
            background: #fff;
            background:url('__IMG__uncheck.png') no-repeat center center;
            background-size: 15px 15px;
            border-radius: 50%;
            margin-right:6.5px;
            margin-top:-1.5px;
        }
        input[type="checkbox"]:checked {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            vertical-align: middle;
            background:url('__IMG__xuanzhong.png') no-repeat center center;
            background-size: 15px 15px;
            border-radius: 50%;
        }

	 /*input[type="checkbox"] {*/
						 /*-webkit-appearance: none;*/
						 /*width: 15px;*/
						 /*height: 15px;*/
						 /*vertical-align: middle;*/
						 /*background: #D45365;*/
						 /*background-size: 15px 15px;*/
						 /*border-radius: 50%;*/
						 /*margin-right:6.5px;*/
						 /*margin-top:-1.5px;*/
				 /*}*/
	 /*input[type="checkbox"]:checked {*/
						 /*-webkit-appearance: none;*/
						 /*width: 15px;*/
						 /*height: 15px;*/
						 /*vertical-align: middle;*/
						 /*background:url('__IMG__xuanzhong.png') no-repeat center center;*/
						 /*background-size: 15px 15px;*/
						 /*border-radius: 50%;*/
				 /*}*/
        .code{
            width: auto;
            height: 2.35rem;
            font-size:0.65rem;
            color:#E73C5C;
            line-height:2.35rem;
            text-align: center;
        }
        .code1{
            width: auto;
            height: 2.35rem;
            font-size:0.65rem;
            color:#B3B3B3;
            line-height:2.35rem;
            text-align: center;
        }
	</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav" style="padding-top:25px;" id="header">
		<a class="aui-pull-left" tapmode="active" onclick="history.go(-2)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
	</header>
	<div class="warrp">
		<div class="title">
			绑定手机号
		</div>
		<div class="phone">
			手机号
		</div>
		<div class="shuru underLine">
				<input type="tel" placeholder="请输入手机号" name="phone"/>
			<div class="code" id='code' onclick="getcode()">
				发送验证码
			</div>
		</div>
		<div class="phone">
				验证码
		</div>
		<div class="shuru underLine">
				<input type="tel" placeholder="请输入验证码" name="phonecode"/>
		</div>
		<div class="login-btn" onclick="bandlogin()">
					绑定并登陆
		</div>
        <div class="xieyi">
            <input type="checkbox" class="checkbox" name="read" checked  id="checkType">
            <div class="tongyi">
                我已阅读并同意<span onclick="xieyi()">“用户协议”</span>
            </div>
        </div>
	</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript">
    var onClickTime;//点击时间
    var onClickTime1;//当前时间
    var isOnclick = true;
    //获取验证码
    function getcode() {
        var phone = $('input[name="phone"]').val();
        $.ajax({
            url:'{:url("Login/getPhoneCode")}',
            data:{phone:phone,type:2},
            dataType:'JSON',
            type:'post',
            success:function (data) {
                if(data.status == 200){
                    layer.open({
                        content: '发送成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    //60S倒计时
                    if (isOnclick) {
                        onClickTime=Math.floor((new Date().getTime())/1000);
                        isinerval = setInterval('CountDown()', 1000);
                        isOnclick = false;
                    }
                }else{
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }

    //验证码60秒倒数
    function CountDown () {
        onClickTime1=60-(Math.floor((new Date().getTime())/1000)-onClickTime);
        var code = $api.byId('code');
        $api.removeCls(code, 'code');
        $api.addCls(code, 'code1');
        if (onClickTime1 < 1) {
            $api.html(code, '重新获取');
            clearInterval(isinerval);
            isOnclick = true;
            return;
        }
        $api.html(code, '倒计时' + onClickTime1 + 's');
    }

    //绑定并登陆
    function bandlogin() {
        if($api.dom('.checkbox').checked==false){
            layer.open({
                content: '请阅读并同意用户协议'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            return;
        }
        var phone = $('input[name="phone"]').val();
        var phonecode = $('input[name="phonecode"]').val();
        $.ajax({
            url:'{:url("Login/ajaxBandPhone")}',
            data:{phonecode:phonecode,phone:phone},
            dataType:'JSON',
            type:'post',
            success:function (res) {
                if(res.status == 200){
                    location.href = '{:url("Login/account")}';
                }else{
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }

    //用户协议
	function xieyi(){
		location.href = '{:url("Login/userArgement")}';
	}
</script>

</html>
